<template>
  <van-field
    v-if="h5"
    :model-value="fieldModelText"
    :is-link="!isDetail"
    readonly
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :clearable="item.options && item.options.clearable"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    @click="onShowPicker"
  >
    <template #input v-if="fieldModelText">
      <van-text-ellipsis v-if="item.options.ellipsis" :content="fieldModelText" style="width: 100%" />
      <div v-else>
        {{ fieldModelText }}
      </div>
    </template>
  </van-field>
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-select
      v-if="!isDetail"
      :model-value="fieldModel"
      value-key="value"
      style="flex: 1"
      multiple
      :collapse-tags="item.options && item.options.collapseTags"
      :collapse-tags-tooltip="item.options && item.options.collapseTags"
      :max-collapse-tags="item.options && item.options.maxCollapseTags"
      :disabled="item.options && item.options.disabled"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
      @change="onChange"
      @remove-tag="onRemoveTag"
    >
      <el-checkbox-group v-model="fieldModel">
        <el-option
          v-for="(r, i) in item.options.optionItems"
          :key="i"
          :label="r.label"
          :value="r.value"
          :disabled="r.disabled"
        >
          <el-checkbox :label="r.label" :value="r.value" :disabled="r.disabled" style="pointer-events: none" />
        </el-option>
      </el-checkbox-group>
    </el-select>
    <div v-else style="overflow: hidden; flex: 1">
      <el-text :truncated="item.options.ellipsis">{{ fieldModelText }}</el-text>
    </div>
  </widget-form-item>

  <van-popup v-model:show="showPicker" round position="bottom">
    <div class="van-action-sheet__description">{{ item.options.label }}</div>
    <div class="van-action-sheet__content">
      <div class="popup-content">
        <van-checkbox-group v-model="fieldModel" direction="horizontal">
          <van-checkbox
            v-for="r in item.options.optionItems"
            :key="r.value"
            :name="r.value"
            :class="fieldModel.includes(r.value) ? 'checkbox-active' : ''"
          >
            {{ r.label }}
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="van-action-sheet__gap"></div>
    <div class="van-hairline--top van-dialog__footer">
      <button type="button" class="van-action-sheet__cancel van-dialog__cancel" @click="showPicker = false">
        <div class="van-button__content">
          <span class="van-button__text">取消</span>
        </div>
      </button>
      <button type="button" class="van-action-sheet__cancel van-dialog__confirm van-hairline--left" @click="onConfirm">
        <div class="van-button__content">
          <span class="van-button__text">确认</span>
        </div>
      </button>
    </div>
  </van-popup>
</template>

<script>
import _ from 'lodash'
import { ref, computed } from 'vue'
import props from './props'
import field from './field'

const checkboxlistProps = _.defaultsDeep(
  {
    modelValue: {
      type: Array,
      default: []
    }
  },
  props
)

export default {
  name: 'MCheckboxList',
  props: checkboxlistProps,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const showPicker = ref(false)

    const customFieldName = {
      text: 'label',
      children: 'children'
    }

    const options = computed(() => props.item.options)

    /** 组件权限 */
    const isDetail = computed(() => {
      if (props.detail) {
        return true
      }
      return props.item.permission > 0
    })

    const fieldModel = computed({
      get() {
        console.log('props.modelValue :>> ', props.modelValue)
        return props.modelValue
      },
      set(val) {
        emit('update:modelValue', val)
      }
    })

    const fieldModelText = computed(() => {
      if (
        Array.isArray(props.item.options.optionItems) &&
        Array.isArray(fieldModel.value) &&
        fieldModel.value.length > 0
      ) {
        const options = props.item.options.optionItems
          .filter((x) => fieldModel.value.includes(x.value))
          .map((x) => x.label)
        return options.join(', ')
      }
      return isDetail.value ? '--' : ''
    })

    const onConfirm = () => {
      showPicker.value = false
    }

    const onShowPicker = () => {
      if (!options.value.readonly && !options.value.disabled && !isDetail.value) {
        showPicker.value = true
      }
    }

    const onChange = (val) => {
      emit('update:modelValue', val)
    }

    const onRemoveTag = (tag) => {
      const val = props.modelValue.filter((v) => v !== tag)
      emit('update:modelValue', val)
    }

    return {
      ...field(props, emit),
      showPicker,
      customFieldName,
      fieldModelText,
      onConfirm,
      onShowPicker,
      onChange,
      onRemoveTag
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-select-dropdown__item) {
  padding-right: 0 !important;
  &.is-selected:after {
    width: 0 !important;
  }
}
.van-action-sheet__content {
  position: relative;
  padding: 16px;
  min-height: 150px;
  max-height: 480px;
}
</style>
